<template>
	<view class="box">
		<view class="orderwrap">
			<view class="orderitem">
				<view class="itemtop">
					<view class="name">
						<image style="width: 38rpx;height: 38rpx;border-radius: 50%;margin-right: 10rpx;"
							:src="info.shop_seller.logo" mode="aspectFill"></image> {{info.shop_seller.name}}
					</view>
				</view>
				<view class="itemcenter">
					<image :src="info.image" mode="aspectFill"></image>
					<view class="itemcenterright">
						<view class="itemcenterrightitem">
							{{info.goods_name}}
						</view>
						<view class="itemcenterrightitem">
							<text class="textone">数量X{{info.num}}</text>
						</view>
						<view class="itemcenterrightitem">
							￥{{info.price}}
						</view>
					</view>
				</view>
				<view class="order_sn">
					<text>订单编号</text>
					<view class="orderight">
						<text>{{info.order_relation.order_no}}</text>
						<image @click="copyordersn" :src="baseUrl + '/static/icon/copy.png'" mode="aspectFill"></image>
					</view>
				</view>
			</view>

			<view class="empty2">

			</view>
		</view>
		<view class="selwrap">
			<view class="tit">
				申请类型
			</view>
			<view class="main">
				<view class="item" v-for="(item,index) in  list" @click="sel(item)">
					<view class="itemtop">
						<image v-if="!item.select" :src="baseUrl + '/static/icon/nosel.png'" mode="aspectFill"></image>
						<image v-if="item.select" :src="baseUrl + '/static/icon/i_xz1.png'" mode="aspectFill"></image>
						<text>{{item.name}}</text>
					</view>
					<view class="tip">
						{{item.word}}
					</view>
				</view>
			</view>
		</view>
		<view class="btnwrap">
			<!-- #ifdef MP-WEIXIN -->
			<button open-type="contact" @contact="">咨询客服</button>
			<!-- #endif -->
			<!-- #ifdef MP-ALIPAY -->
			<view class="" style="position: relative;">
				<view class="kefu">咨询客服</view>
				<contact-button class="kefu" tnt-inst-id="Fs0_yOao" scene="SCE01350885" />
			</view>
			<!-- #endif -->

			<!-- #ifdef H5 -->
			<button @click="goapply">咨询客服</button>
			<!-- #endif -->
			<view class="next" @click="gonext">
				下一步
			</view>
		</view>
		<u-popup :show="flag" mode="center" @close="flag=false" :closeable="true" bgColor="transparent"
			:closeOnClickOverlay="false">
			<view class="popup-content">
				<text class="popup-title h2">联系客服</text>
				<view class="popup-center" @click="copywx">
					<text>客服微信：{{infos.hot_wechat}}</text>
					<image @click="copywx" :src="baseUrl +'/static/icon/copy.png'" mode="aspectFill"></image>
				</view>
				<view class="popup-center">
					<text>客服电话：{{infos.hot_line}}</text>
					<image @click="copytel" :src="baseUrl +'/static/icon/copy.png'" mode="aspectFill"></image>
				</view>
				<text class="btns" @click="flag=false">确定</text>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import {
		detailinfo
	} from "../../api/order.js"
	import {
		setting
	} from "../../api/other.js"
	export default {
		data() {
			return {
				baseUrl: this.$imageBaseUrl,
				list: [{
						name: "退货退款",
						select: true,
						type: 1,
						word: "适用于：订单收货在七天内，且商品包装完好，不影响二次售卖。详请可咨询客服人员。"
					},
					{
						name: "仅退款 (未收到货)",
						select: false,
						type: 3,
						word: "适用于：订单已发货，但您尚未收到商品。如果物流拦截失败，您仍可能收到商品，请在收到商品后，通过【退货退款】方式完成退款"
					},
					{
						name: "三包服务",
						select: false,
						type: 2,
						word: "适用于：订单收货超过七天，但在商品三包服务期限内的。注意，不同商品三包服务的期限及内容可能并不相同，详情请咨询客服人员。"
					},

				],
				id: "",
				info: {
					shop_seller: {
						logo: "",
						name: ""
					},
					order_relation: {
						order_no: ""
					}
				},
				type: 1,
				flag: false,
				infos: {}
			}
		},
		onLoad(e) {
			this.id = e.id
			this.gedetail()
			this.getsetting()
		},
		methods: {
			getsetting() {
				setting().then(res => {
					this.infos = res.data.hot_service
				})
			},
			gedetail() {
				detailinfo({
					id: this.id
				}).then(res => {
					this.info = res.data
				})
			},
			gonext() {
				if (this.type == 2) {
					this.flag = true
				} else if (this.type == 3) {
					uni.navigateTo({
						url: "/pageOrder/aboutorder/refundonly?type=" + this.type + "&id=" + this.id
					})
				} else {
					uni.navigateTo({
						url: "/pageOrder/aboutorder/applyaftersaletwo?type=" + this.type + "&id=" + this.id
					})
				}

			},
			goapply() {
				window.location.href = "https://work.weixin.qq.com/kfid/kfcc9a6800d61bdb24d"
			},
			sel(ele) {
				this.list.forEach(item => item.select = false)
				this.type = ele.type
				ele.select = true
				console.log(ele)
			},
			copywx() {
				uni.setClipboardData({
					data: this.infos.hot_wechat,
					success: function() {
						uni.$u.toast('复制成功');
					}
				});

			},
			copytel() {
				uni.makePhoneCall({
					phoneNumber: this.infos.hot_line //仅为示例
				});


			},
			copyordersn() {
				uni.setClipboardData({
					data: this.info.order_relation.order_no,
					success: function() {
						uni.$u.toast('复制成功');
					}
				});
			}
		}
	}
</script>
<style>
	.btnwrap {
		width: 750rpx;
		height: 136rpx;
		background: #FFFFFF;
		border-radius: 0rpx 0rpx 0rpx 0rpx;
		position: fixed;
		bottom: 0;
		display: flex;
		align-items: center;
		justify-content: space-around;
	}

	.btnwrap contact-button {
		width: 226rpx;
		height: 80rpx;
		position: absolute;
		left: 0;
		top: 0;
		opacity: 0 !important;
		z-index: 9999;
	}
	.kefu{
		width: 226rpx;
		height: 80rpx;
		border-radius: 190rpx 190rpx 190rpx 190rpx;
		border: 2rpx solid #FFC300;
		font-weight: 400;
		font-size: 36rpx;
		color: #FFC300;
		text-align: center;
		line-height: 80rpx;
		background: #fff;
	}
</style>
<style lang="scss">
	.box {
		width: 750rpx;
		height: 100vh;

	}

	.orderwrap {
		width: 750rpx;
		margin-top: 40rpx;

		.orderitem {
			width: 690rpx;
			background: #FFFFFF;
			border-radius: 24rpx 24rpx 24rpx 24rpx;
			margin: 0 auto;
			padding-bottom: 30rpx;

			.itemtop {
				display: flex;

				.name {
					margin-top: 38rpx;
					width: 500rpx;
					margin-left: 24rpx;

				}

				.tag {
					margin-top: 38rpx;
					margin-left: 24rpx;
					width: 96rpx;
					height: 42rpx;
					border-radius: 8rpx 8rpx 8rpx 8rpx;
					border: 1rpx solid #F63418;
					font-weight: 400;
					font-size: 24rpx;
					color: #F63418;
					text-align: center;
					line-height: 42rpx;
				}

				.tag2 {
					margin-top: 38rpx;
					margin-left: 24rpx;
					width: 96rpx;
					height: 42rpx;
					border-radius: 8rpx 8rpx 8rpx 8rpx;
					border: 1rpx solid #999999;
					font-weight: 400;
					font-size: 24rpx;
					color: #999999;
					text-align: center;
					line-height: 42rpx;
				}
			}

			.itemcenter {
				// height: 140rpx;
				margin-top: 30rpx;
				margin-left: 24rpx;
				display: flex;

				>image {
					width: 140rpx;
					height: 140rpx;
					border-radius: 20rpx 20rpx 20rpx 20rpx;
				}

				.itemcenterright {
					margin-left: 24rpx;
					display: flex;
					flex-direction: column;
					justify-content: space-between;
					.itemcenterrightitem {
						// margin-top: 10rpx;
						width: 450rpx;
						// margin-top: 10rpx;
						white-space: nowrap;
						/* 强制文本不换行 */
						overflow: hidden;
						/* 隐藏溢出部分 */
						text-overflow: ellipsis;
						/* 显示省略号 */
						color: #333;

						.textone {
							font-weight: 400;
							font-size: 26rpx;
							color: #666666;
						}

						.texttwo {
							font-weight: 400;
							font-size: 26rpx;
							color: #666666;
							margin-left: 34rpx;
						}
					}
				}
			}

		}
	}

	.selwrap {
		width: 690rpx;
		min-height: 740rpx;
		padding-bottom: 40rpx;
		background: #FFFFFF;
		border-radius: 24rpx 24rpx 24rpx 24rpx;
		margin: 0 auto;
		margin-top: 44rpx;

		.tit {
			font-weight: 400;
			font-size: 28rpx;
			color: #666666;
			padding-top: 32rpx;
			margin-left: 24rpx;
		}

		.main {
			width: 650rpx;
			margin: 0 auto;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;

			.item {
				display: flex;
				flex-direction: column;
				width: 560rpx;
				margin-top: 56rpx;

				.itemtop {
					display: flex;
					align-items: center;

					>image {
						width: 36rpx;
						height: 36rpx;
					}

					>text {
						font-weight: 700;
						font-size: 30rpx;
						color: #3D3D3D;
						margin-left: 20rpx;
					}
				}

				.tip {
					margin-left: 60rpx;
					margin-top: 22rpx;
					font-weight: 400;
					font-size: 26rpx;
					color: #999999;
				}
			}
		}
	}

	.btnwrap {
		width: 750rpx;
		height: 136rpx;
		background: #FFFFFF;
		border-radius: 0rpx 0rpx 0rpx 0rpx;
		position: fixed;
		bottom: 0;
		display: flex;
		align-items: center;
		justify-content: space-around;

		>button {
			width: 226rpx;
			height: 80rpx;
			border-radius: 190rpx 190rpx 190rpx 190rpx;
			border: 2rpx solid #FFC300;
			font-weight: 400;
			font-size: 36rpx;
			color: #FFC300;
			text-align: center;
			line-height: 80rpx;
			background: #fff;
		}

		.next {
			width: 412rpx;
			height: 80rpx;
			background: linear-gradient(90deg, #FA2222 2%, #FFC400 98%);
			border-radius: 190rpx 190rpx 190rpx 190rpx;
			text-align: center;
			line-height: 80rpx;
			font-weight: 400;
			font-size: 36rpx;
			color: #FFFFFF;
			/* #ifdef H5 || MP-WEIXIN */
			margin-right: 40rpx;
			/* #endif */
			
		}
	}

	.popup-content {
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: 48rpx;
		width: 602rpx;
		height: 406rpx;
		background: #FFFFFF;
		border-radius: 22rpx 22rpx 22rpx 22rpx;


	}

	.popup-title {
		margin-top: 40rpx;
		font-weight: 700;
		font-size: 32rpx;
		color: #333333;
	}

	.popup-center {
		display: flex;
		align-items: center;
		justify-content: center;
		overflow: auto;

		>image {
			margin-left: 14rpx;
			width: 20rpx;
			height: 20rpx;
		}
	}

	.btns {
		width: 264rpx;
		height: 72rpx;
		background: linear-gradient(90deg, #FA2222 2%, #FFC400 98%);
		border-radius: 280rpx 280rpx 280rpx 280rpx;
		text-align: center;
		line-height: 72rpx;
		font-weight: 400;
		font-size: 28rpx;
		color: #FFFFFF;
	}

	.order_sn {
		display: flex;
		align-items: center;
		justify-content: space-between;
		width: 650rpx;
		margin: 0 auto;
		margin-top: 20rpx;
		font-weight: 400;
		font-size: 26rpx;
		color: #999999;

		.orderight {
			display: flex;
			align-items: center;

			>image {
				width: 26rpx;
				height: 26rpx;
				margin-left: 10rpx;
			}
		}
	}
</style>